<!-- 选择布局的组件。 -->
<script lang="ts" setup>
import { CheckOutlined } from "@vicons/antd";
import type { VNodeChild } from "vue";

const props = withDefaults(
  defineProps<{
    layout?: "mix" | "side" | "top";
    inverted?: boolean;
    checked?: boolean;
    title?: string | (() => VNodeChild);
    dark?: boolean;
  }>(),
  {
    inverted: false,
    layout: "mix",
    checked: false,
  },
);

defineEmits(["click"]);

const headerClass = computed(() => {
  if (props.layout === "mix" || props.layout === "top" || props.dark)
    return ["bg-[var(--inverted-color)]"];

  if (props.layout === "side") return ["bg-[var(--base-color)]"];

  return [];
});

const siderClass = computed(() => {
  if (props.layout === "mix")
    return ["bg-[var(--base-color)]", "h-75%", "bottom-0"];

  if (props.layout === "side")
    return [
      "h-100%",
      `bg-[var(--${props.inverted || props.dark ? "inverted" : "base"}-color)]`,
    ];

  return [];
});
</script>

<template>
  <n-tooltip trigger="hover">
    <template #trigger>
      <n-el
        class="cursor-pointer inline-block relative w-44px h-36px b-rd-4px overflow-hidden bg-[var(--pro-admin-layout-content-bg)] shadow-[var(--pro-admin-layout-box-shadow)]"
        tag="div"
        @click="$emit('click', $event)"
      >
        <div :class="headerClass" class="h-25% absolute top-0 w-100%" />
        <div
          v-if="layout !== 'top'"
          :class="siderClass"
          class="w-30% absolute left-0 h-100%"
        />
        <div v-if="checked" class="absolute bottom--3px right-3px">
          <n-icon size="16">
            <CheckOutlined />
          </n-icon>
        </div>
      </n-el>
    </template>
    {{ typeof title === "function" ? title() : title }}
  </n-tooltip>
</template>

<style scoped></style>
